
<script setup>
import { ref,computed } from 'vue';
import * as echarts from 'echarts'

const props = defineProps({
  dataList:{
    type:Array,
    required:true
  },
  height: {
    type: String,
    default: '300px'
  }
})


const option=computed(()=>{
  return  {
    legend: {
      textStyle :{
        color:'#e6e5e7',
        verticalAlign:'middle'
      },
      itemWidth:12,
      itemHeight:12,
      icon:'circle',
      bottom: '0%', // 从顶部设置图例位置，可以使用 '10%', '20%', 'auto' 等
      left: 'center' // 左侧位置，'left' | 'right' | 'center' | 具体位置数值
    },
    tooltip: {
      tigger:'none',
      show:false,
      showContent:false
    },
    color: ['#FFE700', '#00D4BD', '#8769FF', '#dd37ef'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '65%'],
        avoidLabelOverlap: false,
        label: {
          position:'inside',
          color:'#fff',
          formatter: function(params) {
            // console.log(params)
            // 计算百分比
            // var percent = (params.value /100).toFixed(2) * 100 + '%';
            return params.value==0?'0':  params.value.toFixed(2) + '%';
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.dataList||[]
      }
    ]
  };
})


</script>

<template>
  <e-charts :style="{height:height}" class="chart" :option="option" />
</template>

<style>
.chart{
  height: 300px;
}
</style>
